<template>
    <div class="container py-8">
      <div class="mb-6">
        <div class="d-flex justify-content-between align-items-center">
          <h1 class="display-4">我的笔记</h1>
          <button class="btn btn-primary" @click="openNewNote">
            <i class="fa fa-plus mr-2"></i>新建笔记
          </button>
        </div>
        <div class="mt-4">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-search"></i></span>
            </div>
            <input 
              type="text" 
              class="form-control" 
              placeholder="搜索笔记..." 
              v-model="searchQuery"
              @input="searchNotes"
            >
          </div>
        </div>
      </div>
  
      <!-- 空状态 -->
      <div v-if="notes.length === 0" class="text-center py-12">
        <div class="bg-light rounded-lg p-8 shadow-sm">
          <i class="fa fa-sticky-note-o text-muted display-4 mb-4"></i>
          <h3 class="text-muted">暂无笔记</h3>
          <p class="text-muted">点击"新建笔记"按钮开始记录</p>
          <button class="btn btn-primary mt-4" @click="openNewNote">
            <i class="fa fa-plus mr-2"></i>新建笔记
          </button>
        </div>
      </div>
  
      <!-- 笔记列表 -->
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        <div class="col" v-for="note in filteredNotes" :key="note.id">
          <div class="card h-100 shadow-sm border-0 hover:shadow-md transition-shadow">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-start mb-3">
                <h5 class="card-title font-weight-bold text-truncate">{{ note.title }}</h5>
                <div class="btn-group">
                  <button class="btn btn-sm btn-outline-secondary" @click="editNote(note.id)">
                    <i class="fa fa-pencil"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-secondary" @click="deleteNote(note.id)">
                    <i class="fa fa-trash"></i>
                  </button>
                </div>
              </div>
              <p class="card-text text-muted line-clamp-3">{{ note.content }}</p>
            </div>
            <div class="card-footer bg-white border-top-0">
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">{{ formatDate(note.timestamp) }}</small>
                <span class="badge badge-pill badge-light">{{ note.content.length }} 字符</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        notes: [],
        searchQuery: ''
      }
    },
    computed: {
      filteredNotes() {
        if (!this.searchQuery.trim()) return this.notes
        debugger;
        const query = this.searchQuery.toLowerCase()
        return this.notes.filter(note => 
          note.title.toLowerCase().includes(query) || 
          note.content.toLowerCase().includes(query)
        )
      }
    },
    methods: {
      async fetchNotes() {
        try {
          debugger;
          const response = await this.$axios.get('/notes')
          this.notes = response.data
        } catch (error) {
          console.error('获取笔记失败:', error)
          this.$toast.error('获取笔记失败')
        }
      },
      openNewNote() {
        debugger;
        this.$router.push('/edit/new')
      },
      editNote(id) {
        this.$router.push(`/edit/${id}`)
      },
      async deleteNote(id) {
        if (confirm('确定要删除这条笔记吗？')) {
          try {
            await this.$axios.delete(`/notes/${id}`)
            this.fetchNotes()
            this.$toast.success('笔记已删除')
          } catch (error) {
            console.error('删除笔记失败:', error)
            this.$toast.error('删除笔记失败')
          }
        }
      },
      searchNotes() {
        // 已在computed中处理
      },
      formatDate(timestamp) {
        const date = new Date(timestamp)
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        })
      }
    },
    mounted() {
      this.fetchNotes()
    }
  }
  </script>
  
  <style scoped>
    .hover\:shadow-md:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .transition-shadow {
        transition: box-shadow 0.3s ease-in-out;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
  </style>
